<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<div id="wrapper1">
    <a href="#"><img id="img1" alt="Delicious cake" src="resources/cake.png"></a>
</div>

<script>
async_test(function(t)
{
    var axImg = accessibilityController.accessibleElementById("img1");
    axImg.addNotificationListener(function(notification) {
        if (notification == 'Clicked')
            t.done();
    });

    var img = document.getElementById("img1");
    img.addEventListener("click", function(e)
    {
        img.title = "clicked";
    });
    img.click();
}, "clicking an image via javascript sends an accessible click event");
</script>

<div id="wrapper2">
    <a href="#"><img id="img2" alt="Delicious cake" src="resources/cake.png"></a>
</div>

<script>
async_test(function(t)
{
    var axEvent = false;
    var domEvent = false;
    var clickEventHandler = function(e)
    {
        if (e == 'Clicked')
            axEvent = true;

        // "which" is a known property on MouseEvent objects.
        if (e.which) {
            img.title = "clicked";
            domEvent = true;
        }

        if (axEvent && domEvent)
            t.done();
    };

    var axImg = accessibilityController.accessibleElementById("img2");
    axImg.addNotificationListener(clickEventHandler);
    var img = document.getElementById("img2");
    img.addEventListener("click", clickEventHandler);
    axImg.press();
}, "clicking an image via accessibility sends both an accessible and a DOM click event");
</script>
